<template>
  <div class="client-grade-page">
    <div class="search-wrapper">
      <super-search :search-form="searchForm" :search-item-config="searchItemList" @search="searchHandle"></super-search>
    </div>
    <div class="content-wrapper">
      <super-table
        :height="tableHeight"
        ref="tableRef"
        v-model:page="searchForm.pageNum"
        v-model:limit="searchForm.pageSize"
        :loading="loading"
        :data="tableData"
        :total="searchForm.total"
        :column="tableColumn"
        @change-page="getData"
      >
        <template #tool>
          <a-button type="primary" @click="addHandle">新增</a-button>
          <a-button type="primary" @click="deptAccountExcelHandle">导出</a-button>
          <a-button type="primary" @click="importProblemHandle('AccountKeeper', 13)">批量导入</a-button>
          <a-button type="primary" @click="showLogHandle(undefined)">日志</a-button>

          <a-button type="primary" @click="changeStatusHandle(1)">启用</a-button>
          <a-button type="primary" @click="changeStatusHandle(0)">停用</a-button>
        </template>

        <template #status="{ row }">
          <a-tag v-if="row.status === 1" color="#87d068"> 启用 </a-tag>
          <a-tag v-if="row.status === 0" color="#cd201f"> 停用 </a-tag>
        </template>
        <template #action="{ row }">
          <a-button type="link" @click="editHandle(row)">编辑</a-button>
          <a-button type="link" @click="showHandle(row)">查看</a-button>
          <a-button type="link" @click="showLogHandle(row)">日志</a-button>
        </template>
      </super-table>
    </div>
    <a-modal v-model:visible="dialogOpts.visible" :maskClosable="false" :keyboard="false" :closable="false" :footer="null" :title="dialogOpts.title" :width="dialogOpts.width">
      <component
        v-model:visible="dialogOpts.visible"
        :downloadType="upLoadTemplate"
        :uploadRequest="upLoadRequestFn"
        :is="dialogOpts.component"
        :type="dialogOpts.type"
        :pass-data="dialogOpts.passData"
        @submit="dialogSubmitHandle"
        :maxCount="1"
      ></component>
    </a-modal>

    <!-- 抽屉 -->
    <a-drawer class="custom-drawer" v-model:visible="drawerOpts.visible" :title="drawerOpts.title" :closable="true" @close="drawerOpts.visible = false" :width="drawerOpts.width" placement="right">
      <component
        v-model:visible="drawerOpts.visible"
        :is="drawerOpts.component"
        :type="drawerOpts.type"
        :pass-data="drawerOpts.passData"
        @submit="drawerSubmitHandle"
        :requestFn="requestFn"
      ></component>
    </a-drawer>
  </div>
</template>

<script lang="ts">
import AddAccountKeeper from "./components/addAccountKeeper/index.vue";
import UploadFileAndErrorTemplate from "@/components/uploadfileAndDownLoadTemplate/index.vue";
import OperationLog from "@/components/operationLog/index.vue";
import EditAccountKeeper from "./components/editAccountKeeper/index.vue";
import UploadfileAndDownLoadTemplate from "@/components/uploadfileAndDownLoadTemplate/index.vue";
export default {
  name: "AccountKeeper",
  components: {
    AddAccountKeeper,
    UploadFileAndErrorTemplate,
    EditAccountKeeper,
    OperationLog,
    UploadfileAndDownLoadTemplate
  }
};
</script>
<script lang="ts" setup>
import TableHeightHook from "@/hook/tableHeightHook";
import ModalHook from "@/hook/modalHook";
import { searchItemList, tableColumn } from "./data";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
const { tableHeight, loading } = TableHeightHook(50);
const { searchForm, tableData, dialogOpts, drawerOpts, tableRef, upLoadType, getUpdateOptions, upLoadTemplate } = InitHook();
const { searchHandle, getData, editHandle, addHandle, changeStatusHandle, showHandle, showLogHandle, requestFn, importProblemHandle, upLoadRequestFn, deptAccountExcelHandle } = OperationHook({
  searchForm,
  tableData,
  loading,
  dialogOpts,
  drawerOpts,
  tableRef,
  upLoadType,
  getUpdateOptions,
  upLoadTemplate
});
const { dialogSubmitHandle, drawerSubmitHandle } = ModalHook({
  dialogOpts,
  drawerOpts,
  callBack: getData
});
getData();
</script>
<style lang="stylus" scoped></style>
